<template>
	<!-- :style="`height:calc(100vh - ${(deviceInfo.statusBarHeight * 2) || 66}rpx);`" -->
	<!-- 订单详细 -->
	<view class="orderbetails">
		<view class="orderbetails-fahuo">
			<view class="orderbetails-fahuo-hd">
				<view class="orderbetails-fahuo-hd-left">
					<image src="/static/richeng.png" mode=""></image>
				</view>
				<view class="orderbetails-fahuo-hd-right">
					{{setStatus(form.status)}}
				</view>
			</view>
			<view class="orderbetails-fahuo-db" v-if="form.status=='1'">
				还剩29:59分自动取消订单
			</view>

			<view class="orderbetails-fahuo-db" v-if="form.status=='2'">
				请耐心等待,商家已火速为您发货
			</view>

			<view class="orderbetails-fahuo-db" v-if="form.status=='3'">
				请尽快确认收货哦！
			</view>

			<view class="orderbetails-fahuo-db" v-if="form.status=='4'">
				评价一下此次的购物评分吧！
			</view>
		</view>
		<view class="orderbetails-xinxi">
			<!-- <view class="orderbetails-xinxi-left">
				<image src="/static/weizhi.png" mode=""></image>
			</view> -->
			<view class="orderbetails-xinxi-right">
				<view class="orderbetails-xinxi-right-hd">
					<view class="orderbetails-xinxi-right-name">
						{{form.consignee}}
					</view>
					<view class="orderbetails-xinxi-right-dh">
						{{form.phone}}
					</view>
				</view>
				<view class="orderbetails-xinxi-right-db">
					{{form.address}}
				</view>
			</view>
		</view>
		<view class="orderbetails-libao">
			<!--  -->
			<view class="order">
				<view class="state ms10">
					<view class="flex">
						<view class="flex" style="align-s: center;">
							<img class="mr5" src="/static/img/myorder/01-shangjia.png"
								style="height: 30rpx; width: 30rpx;" alt="">
							<view class="size_14">
								某某商家
							</view>
						</view>
					</view>
				</view>
				<view class="orderDetail ms15">
					<image src="http://storage.dezhoucloud.com/img/logo.png" mode=""></image>
					<view class="Detail">
						<view class="ms13">
							{{form.uproductName}}
						</view>
						<view class="">
							规格：{{form.uproductSpecs}}
						</view>
						<text></text>
						<text></text>
					</view>
					<view class="orderNum">
						<view class="orderPrice">
							<text class="currency">￥</text><text>{{form.uretailPrice || '500' }}</text>
						</view>
						<text class="currency">x{{form.count ||'2' }}</text>
					</view>
				</view>
				<view class="orderBtnGroup">
					<u-row class="ms10">
						<u-col :span="8">
							商品总额
						</u-col>
						<u-col :span="4">
							<view class="align_r">
								￥{{form.totalAmount || '500' }}
							</view>
						</u-col>
					</u-row>
					<u-row class="ms10">
						<u-col :span="8">
							综合服务费
						</u-col>
						<u-col :span="4">
							<view class="align_r">
								￥0.00
							</view>
						</u-col>
					</u-row>
					<u-row class="ms10">
						<u-col :span="8">
						</u-col>
						<u-col :span="4">
							<view class="align_r">
								实付：￥{{form.totalAmount || '500' }}
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<!--  -->
		</view>
		<view class="orderbetails-bianhao">
			<view class="orderbetails-bianhao-hd">
				<view class="orderbetails-bianhao-hd-nr">
					订单编号：1234567891237891238
				</view>
				<view class="orderbetails-bianhao-hd-nr">
					创建时间：2021.02.08 19:19:00
				</view>
				<view class="orderbetails-bianhao-hd-nr">
					支付方式：支付宝
				</view>
				<view class="orderbetails-bianhao-hd-nr">
					支付流水号：12453644578965425
				</view>
			</view>
			<view class="orderbetails-bianhao-db">
				<!-- <image src="/static/xinxi.png" mode=""></image> -->
				<!-- <text>联系客服</text> -->
			</view>
		</view>
		<view class="" style="height: 308rpx;background-color: #F5F5F5;">

		</view>
		<view class="footer">

			<view class="footer-right" v-if="form.status == '1'">
				<view class="" @click='showModal'>
					<view :class="['footer-right-wuliu',active == 0 ? 'active':'']" @click="getList(0)"
						style="margin-right: 202rpx;">
						取消订单
					</view>
				</view>
				<!-- footer-right-dizhi -->
				<view class="">
					<view :class="['footer-right-dizhi',active == 1 ? 'active':'']" @click="getList(1)">
						立即付款
					</view>
				</view>
			</view>

			<view class="footer-right" v-if="form.status == '2'">
				<view class="" @click='showModal'>
					<view :class="['footer-right-wuliu',active == 1 ? 'active':'']" @click="getList(0)"
						style="margin-right: 202rpx;">
						发起退款
					</view>
				</view>
				<!-- footer-right-dizhi -->
				<view class="">
					<view :class="['footer-right-dizhi',active == 0 ? 'active':'']" @click="getList(1)">
						催发货
					</view>
				</view>
			</view>

			<view class="footer-right" v-if="form.status == '3'">
				<view class="" @click='showModal'>
					<view :class="['footer-right-wuliu',active == 0 ? 'active':'']" @click="getList(0)"
						style="margin-left: 202rpx;">
						确认收货
					</view>
				</view>
				<!-- footer-right-dizhi -->

			</view>

			<!-- 	<view class="footer-right" v-if="form.status == '4'">
				<view class="" @click='showModal'>
					<view :class="['footer-right-wuliu',active == 0 ? 'active':'']" @click="getList(0)"
						style="margin-left: 202rpx;">
						评价
					</view>
				</view>
			</view> -->
			<!-- 弹框 -->
			<view class="" @touchmove.stop.prevent="">
				<u-modal class="customStyle" :title="title" :content="content" :show="show3" showCancelButton
					@confirm="confirm" @cancel="cancel" @close="close" confirmColor="#7976E9" cancelColor="#7976E9">
				</u-modal>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				id: null,
				active: 0,
				/* 弹框 */
				show3: false,
				title: '取消订单',
				content: '是否确认取消订单?',
				form: {

				}
			};
		},
		onLoad(options) {
			this.id = options.data
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			async getDetail() {
				let re = await this.$API.orderApi.orderDetail(this.id)
				this.form = re
				console.log(re, "订单详情");
			},
			setStatus(status) {
				let obj = {
					1: "待付款",
					2: "待发货",
					3: "待收货",
					4: "已完成",
					5: "已取消",
					6: "退款中",
					7: "已退款",
				};
				return obj[status];
			},
			showModal() {
				this.show3 = true;
			},
			async confirm() {
				this.show3 = false;
				let re = await this.$API.orderApi.updateOrder(this.form.orderId, 5);
				if (re.data) {
					this.$pub.go(`/pages_my/ordercate/ordercate?type=1`)
				}
			},
			cancel() {
				this.show3 = false
			},
			getList(e) {
				this.active = e
				if (e == 1) {
					uni.switchTab({
						url: '/  '
					})
				}
			},
		},
		computed: {
			// ...mapState({
			// 	user: state => state.user,
			// 	deviceInfo: state => state.deviceInfo,
			// })
		},
	}
</script>

<style lang="less">
	.orderbetails {
		background-color: #F5F5F5;

		.orderbetails-fahuo {
			background-color: #7976E9;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.orderbetails-fahuo-hd {
				display: flex;

				.orderbetails-fahuo-hd-left {
					width: 40rpx;
					height: 40rpx;
				}

				.orderbetails-fahuo-hd-right {
					margin-left: 20rpx;
					font-size: 35rpx;
					color: #fff;

				}
			}

			.orderbetails-fahuo-db {
				margin-top: 15rpx;
				color: #fff;
				font-size: 25rpx;
			}
		}

		.orderbetails-xinxi {
			padding: 17rpx;
			display: flex;
			align-s: center;
			background-color: #fff;

			.orderbetails-xinxi-left {
				width: 65rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.orderbetails-xinxi-right {
				.orderbetails-xinxi-right-hd {
					display: flex;
					align-s: center;

					.orderbetails-xinxi-right-name {
						font-size: 30rpx;
						color: #161712;
					}

					.orderbetails-xinxi-right-dh {
						font-size: 22rpx;
						color: #666;
						margin-left: 30rpx;
					}
				}

				.orderbetails-xinxi-right-db {
					margin-top: 10rpx;
					font-size: 25rpx;
					color: #161712;
				}
			}
		}

		.orderbetails-libao {
			padding: 20rpx;
			// display: flex;
			align-s: center;
			background-color: #fff;
			margin-top: 20rpx;

			.orderbetails-libao-hd {
				display: flex;

				.orderbetails-libao-hd-tu {
					width: 120rpx;

					image {
						width: 103rpx;
						height: 104rpx;
						border-radius: 10rpx;
					}
				}

				.orderbetails-libao-hd-wz {
					line-height: 50rpx;

					.orderbetails-libao-hd-wz-hd {
						font-size: 30rpx;
						color: #161712;
					}

					.orderbetails-libao-hd-wz-db {
						color: #666;
						font-size: 22rpx;
					}
				}
			}

			.orderbetails-libao-db {
				margin-top: 46rpx;
				display: flex;
				align-s: center;
				justify-content: flex-end;

				view:nth-child(1) {
					color: #666;
					font-size: 22rpx;
				}

				view:nth-child(2) {
					color: #F53E2E;
					font-size: 22rpx;

					text {
						font-size: 35rpx;
					}
				}
			}
		}

		.orderbetails-bianhao {
			margin-top: 20rpx;
			background-color: #fff;
			// padding: 17rpx;
			padding-left: 32rpx;


			.orderbetails-bianhao-hd {
				.orderbetails-bianhao-hd-nr {
					line-height: 50rpx;
					font-size: 22rpx;
					color: #161712;
				}
			}

			.orderbetails-bianhao-db {
				text-align: center;
				margin-top: 50rpx;

				image {
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}

				text {
					color: #161712;
					font-size: 22rpx;
					margin-left: 10rpx;
				}
			}
		}

		.footer {
			// height: 150rpx;
			padding: 40rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			display: flex;
			align-s: center;
			justify-content: center;
			box-sizing: border-box;
			background-color: #fff;

			.footer-left {
				font-size: 25rpx;
				color: #161712;
				width: 150rpx;
			}

			.footer-right {
				display: flex;
				justify-content: space-between;

				.footer-right-wuliu {
					padding: 15rpx 35rpx;
					border: 1rpx solid #ccc;
					border-radius: 35rpx;
				}

				.footer-right-dizhi {
					padding: 15rpx 35rpx;
					border: 1rpx solid #ccc;
					border-radius: 35rpx;
					margin-left: 20rpx;
				}

				.active {
					background-color: #7976e9;
					color: #fff;
				}
			}
		}
	}


	.order {
		background-color: #fefefe;
		// width: 100%;
		border-radius: 24rpx;
		padding: 22rpx;
		margin-top: 10rpx;

		.orderDetail {
			display: flex;
			align-s: flex-start;
			justify-content: space-between;
			padding: 6rpx;

			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
			}

			.Detail {
				flex: 1;
				margin: 10rpx 15rpx;
				display: flex;
				flex-direction: column;
				align-s: flex-start;

				text {
					&:first-child {
						font-weight: 700;
					}

					&:last-child {
						font-size: 24rpx;
						color: #949494;
						margin-top: 20rpx;
					}
				}
			}

			.orderNum {
				display: flex;
				flex-direction: column;
				align-s: flex-end;
				color: #949494;

				.orderPrice {
					color: #000;
					margin-bottom: 20rpx;

					text:nth-child(2) {
						font-weight: 700;
						font-size: 32rpx;
					}
				}
			}
		}

		.orderBtnGroup {
			width: 100%;
			display: flex;
			flex-direction: column;
			// align-s: flex-end;

			.count {
				text {
					font-weight: 600;
				}
			}

			button {
				margin-top: 20rpx;
				margin-right: 0;
			}
		}
	}

	/* 模态框内容居中 */
	.u-modal__content__text {
		text-align: center;
	}

	.customStyle {
		z-index: 999;
		text-align: center;
	}
</style>